<template>
    <div class="numberPad">
        <div class="output">{{output}}</div>
        <div class="buttons" @click="control">
            <button :class="{currentBtn:currentButton==='1'}">1</button>
            <button :class="{currentBtn:currentButton==='2'}">2</button>
            <button :class="{currentBtn:currentButton==='3'}">3</button>
            <button :class="{currentBtn:currentButton==='删除'}">删除</button>
            <button :class="{currentBtn:currentButton==='4'}">4</button>
            <button :class="{currentBtn:currentButton==='5'}">5</button>
            <button :class="{currentBtn:currentButton==='6'}">6</button>
            <button :class="{currentBtn:currentButton==='清空'}">清空</button>
            <button :class="{currentBtn:currentButton==='7'}">7</button>
            <button :class="{currentBtn:currentButton==='8'}">8</button>
            <button :class="{currentBtn:currentButton==='9'}">9</button>
            <button :class="{currentBtn:currentButton==='OK'}" class="ok">OK</button>
            <button :class="{currentBtn:currentButton==='0'}" class="zero">0</button>
            <button :class="{currentBtn:currentButton==='.'}">.</button>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import {Component,Prop} from 'vue-property-decorator'
    @Component
    export default class NumberPad extends Vue{
        @Prop() readonly value!: number;
        //!为空不警告
        output = this.value.toString();
        currentButton = ''
        get parse(){
            return parseFloat(this.output)
        }
        control(event:MouseEvent){
            const button = (event.target as HTMLButtonElement)
            const input = button.innerText!
            //忽略类型，防止提示
            if(input === '删除'){
                this.remove()
            }else if(input === '清空'){
                this.clear()
            }else if(input === 'OK'){
                this.ok()
            }
            this.numInput(input)
            this.selectButton(input)
        }
        numInput(inputButton:string){
            if(this.output.indexOf('.')>=0&&inputButton==='.'){return}
            if(this.output.length>=16){return;}
            if('0123456789.'.indexOf(inputButton)>=0){
                if(this.output==='0'&&inputButton!=='.'){
                    this.output = inputButton
                    return
                }
                this.output+=inputButton
                return
            }
        }
        remove(){
            if(this.output.length===1){
                this.output = '0'
                return
            }
            this.output = this.output.slice(0,-1)
        }
        clear(){
            this.output = '0'
        }
        ok(){
            this.$emit('update:value',this.parse)
            this.$emit('submit',this.parse)
            this.clear()
        }
        selectButton(button:string){
            this.currentButton = button
            setTimeout(()=>{
                this.currentButton = ''
            },200 )
        }

    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";
    .numberPad {
        .output {
            @extend %clearFix;
            @extend %innerShadow;
            font-size: 36px;
            font-family: Consolas, monospace;
            padding: 9px 16px;
            text-align: right;
        }
        .currentBtn{
            background: radial-gradient(ellipse at center,
                    rgba(0,0,0,0.2) 1%,
                    rgba(119,119,119,0.99) 100%,
                    rgba(119,119,119,1) 101%)!important;
        /*filter: drop-shadow(0px 0px -1px rgba(0,0,0,1)) !important;*/
        }
        .buttons {
            @extend %clearFix;
            > button {
                width: 25%;
                height: 64px;
                float: left;
                background: transparent;
                border: none;
                background: radial-gradient(ellipse at center,
                        rgba(0,0,0,0) 1%,
                        rgba(0,0,0,0) 100%,
                        rgba(0,0,0,0) 101%);
                transition: all 0.2s;
                &.ok {
                    height: 64*2px;
                    float: right;
                }
                &.zero {
                    width: 25*2%;
                }
                $bg: #f2f2f2;
                &:nth-child(1) {
                    background: $bg;
                }
                &:nth-child(2), &:nth-child(5) {
                    background: darken($bg, 4%);
                }
                &:nth-child(3), &:nth-child(6), &:nth-child(9) {
                    background: darken($bg, 4*2%);
                }
                &:nth-child(4), &:nth-child(7), &:nth-child(10) {
                    background: darken($bg, 4*3%);
                }
                &:nth-child(8), &:nth-child(11), &:nth-child(13) {
                    background: darken($bg, 4*4%);
                }
                &:nth-child(14) {
                    background: darken($bg, 4*5%);
                }
                &:nth-child(12) {
                    background: darken($bg, 4*6%);
                }
            }
        }
    }
</style>